<template>
  <div class="bgc" >
<div class="title"><img src="../../../assets/map/location.png" alt="">{{cityName}}</div>
    <div style="display: flex;">
      <div class="left">
        <div class="leftItem">
          <div class="titleInfo"><div class="border"></div> 合作信息</div>
          <div class="info">合作区县&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{cooperationQx}}个</div>
          <div class="info">合作乡镇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{cooperationXz}}个</div>
        </div>
        <div class="leftItem">
          <div class="titleInfo"><div class="border"></div> 项目信息</div>
          <div class="info">进行中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#F4B815">{{projectJx}}个</span></div>
          <div class="info">已完成&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#1CC9FF">{{projectWc}}个</span></div>
        </div>
      </div>
      <div class="rightTable">
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            height="85%"
        >
          <el-table-column
              prop="name"
              label="项目名称"
              width="160">
          </el-table-column>
          <el-table-column
              prop="projectSchedule"
              align="center"
              label="项目进度"
              :width="$px2rem('120px')"
          >
            <template slot-scope="scope">
              <span :style="{color:scope.row.projectSchedule == 9 ? '#1CC9FF' : '#F4B815'}">
              {{ scope.row.projectSchedule == 9 ? "已完成" : "进行中" }}
              </span>

            </template>
          </el-table-column>
          <el-table-column
              prop="proLeadaer_dictText"
              label="项目负责人"
              align="center"
              width="100"
          >
          </el-table-column>
          <el-table-column
              prop="proprietorId_dictText"
              align="center"
              label="业主">
          </el-table-column>
          <el-table-column
              prop="projectAmount"
              align="center"
              label="合同金额">
          </el-table-column>
          <el-table-column
              prop="preCompDate"
              align="center"
              width="110"
              label="预计完成时间">
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageNo"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="page.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {bydialogCooperation, bydialogList, bydialogProject, searchById} from "@/api/map";
export default {
  name: "projectDialog",
  components: {
  },
  props: {
    cityName: {
      type: String,
      default: "",
    },
  },
  watch:{
    cityName: function (val) {
        // debugger
        console.log(val);   // 接收父组件的值
        this.getSearchById(val,this.$store.state.timeChange)
      },
      "$store.state.timeChange": {
        handler() {
          this.getSearchById(this.cityName,this.$store.state.timeChange)
      },
      // 立即以obj.name的当前值触发回调
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      tableData: [],
      cooperationQx:0,
      cooperationXz:0,
      projectJx:0,
      projectWc:0,
      page: {
        total: 0,
        pageNo: 1,
        pageSize: 10,
      },
    }
  },
  mounted() {

  },
  created() {
    this.getSearchById(this.cityName,this.$store.state.timeChange)
  },
  methods: {
    async getSearchById(byName,time){
      const res=await searchById({keyWord:byName})
      if(res.result){
        // this.byId=res.result[0].id
        const res1=await bydialogList(res.result[0].id)
        this.tableData=res1.result.records
        const res2=await bydialogCooperation(res.result[0].id,time)   //是这个time要传入时间吗  为啥初次没有调 初次调的方法在那里
          this.cooperationQx=res2.result.nextCount
          this.cooperationXz=res2.result.lastCount
          console.log(res2,'左边合作信息数据')
        const res3=await bydialogProject(res.result[0].id,time)
        this.projectWc=res3.result.filter(x=>x.k==9).reduce((all, el) => all + el.v, 0)
       this.projectJx=res3.result.filter(x=>x.k!=9).reduce((all, el) => all + el.v, 0)
        console.log(res3,'左边项目信息数据')

      }else {
        this.tableData=[]
        this.cooperationQx=0
        this.cooperationXz=0
        this.projectWc=0
        this.projectJx=0
      }
    },
   //  async getBydialogList(id){
   //   const res=await bydialogList(id)
   //    // debugger
   //    console.log(res)
   // this.tableData=res.result.records
   //  },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getSearchById();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.pageNo = val;
      this.getSearchById();
    },
  },
  destroyed() {
    // clearInterval(this.timer)
  }
}
</script>
<style scoped lang="scss">
.bgc{
  position: relative;
  width: 886px;
  height: 500px;
  background: url(../../../assets/map/project_bc.png) no-repeat 0 0;
  background-size: 100% 100%;
  padding: 31px 0 0 43px;
  .title{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    img{
      width: 15px;
      height: 20px;
      vertical-align: middle;
    }
  }
  .left{
    .leftItem{
      width: 140px;
      height: 100px;
      margin-bottom:16px ;
      margin-right: 16px;
      background: rgba(0,152,255,0.2);
      box-shadow: inset 0px 0px 8px 0px #05A1FF;
      border-radius: 2px;
      border: 1px solid #09D2FF;
      padding: 10px;
      .titleInfo{
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        color: #58F3FF;
        //border-left: 2px #58F3FF solid;
        //padding-left: 3px;
        .border{
          width: 2px;
          height: 12px;
          background: #58F3FF;
          margin-right: 4px;

        }
      }
      .info{
        margin-top:8px ;
        font-size: 14px;
        margin-left: 6px;
      }
    }
  }
  .rightTable{
    width: 651px;
    height: 384px;
    background: rgba(0,152,255,0.2);
    box-shadow: inset 0px 0px 24px 0px #05A1FF;
    border-radius: 2px;
    border: 1px solid #09D2FF;
  }
  ::v-deep .el-table,
  .el-table__expanded-cell {
    background-color: unset;
  }
  // 表格内背景颜色
  ::v-deep .el-table th{
    background: rgba(26,247,254,0.16) !important;
    border: 0px;
  }
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color:transparent; // 背景透明
    border: 0px;
    color: #fff; // 修改字体颜色
    //font-size: 24px;
    height: 5px;
    font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
    font-weight: Normal;
    &:hover {
      background-color: transparent; // 背景透明
    }
  }
  ::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
    background: rgba(26,247,254,0.16) !important;
  }
  .el-table::before{
    background-color:transparent !important;
  }


  ::v-deep .el-table tbody tr:hover > td {
    background: rgba(26,247,254,0.16) !important;

  }
  ::v-deep .el-input__inner,
  .el-textarea__inner {
    //height:32px ;
    font-size: 14px;
    background: #00e9ff1a;
    border: 1px solid #33E9FF;
    box-shadow: inset 0 1px 21px 0 #57ecff33;
    border-radius: 6px;
    color: #fff;
  }
  ::v-deep .el-pagination__total {
    color: #fff;
    margin-right: 2px;
  }
  ::v-deep .el-select-dropdown__item li{
    background-color:transparent !important;
  }
  ::v-deep .el-pagination .el-select .el-input{
    width: 90px;
    //border-radius: 6px;
    //border: 1px solid #33E9FF;
    //background-color: transparent !important;
  }
  ::v-deep .el-pager li {
    border: 1px solid #33e9ff;
    border-radius: 6px;
    background-color: unset;
    color: #fff;
    margin-right: 5px;

    &.active {
      background: #1cb9da;
    }
  }
  ::v-deep .el-pagination__sizes{
    margin: 0;
  }
  ::v-deep .el-pagination .btn-next,
  .el-pagination .btn-prev {
    background: #00ffbe1a;
    border: 1px solid #33e9ff;
    box-shadow: inset 0 0 8px 0 #12c2be;
    border-radius: 4px;
    color: #fff;
  }

  ::v-deep .el-pagination button:disabled {
    background: #00ffbe1a;
    border: 1px solid #33e9ff;
    box-shadow: inset 0 0 8px 0 #12c2be;
    border-radius: 4px;
    color: #fff;
  }

  ::v-deep .el-pagination .btn-prev {
    background: #00ffbe1a !important;
    border: 1px solid #33e9ff;
    box-shadow: inset 0 0 8px 0 #12c2be;
    border-radius: 4px;
    color: #fff;
    margin-right: 5px;
  }

  .pagination {
    float: right;
    margin: 10px 0;
  }

}

</style>
